<template>
  <div class="rights-wrap" :class="{'white-rights-wrap':isWhite}">
    <slot name="header">
      <div class="title" v-if="packages.name">
        <img :src="packages.icon" />
        {{packages.name}} {{packagesLen}}大权益
      </div>
    </slot>
    <div class="rights-box" :class="{'white-rights-list':isWhite||itemWhite}">
      <span class="prev-btn" v-if="showPrev && packagesLen > 5" :class="{disabled:transIndex === 0}" @click="onPrev(-4)">
        <svg-icon iconClass="left"/>
      </span>
      <div style="overflow:hidden">
        <ul class="rights-list" :style="{transform: `translateX(-${transIndex*width}px)`}">
          <li v-for="item in packages.rights"
            :key="item.name"
            class="rights-item">
            <div class="img-wrap"><img :src="isWhite||itemWhite?item.p_icon:item.icon" /></div>
            <pre class="rights-name">{{ item.name }}</pre>
          </li>
        </ul>
      </div>
      <span class="next-btn" v-if="showPrev&&packagesLen>5" :class="{disabled: packagesLen - transIndex <= 5}" @click="onNext(4)">
        <svg-icon iconClass="left"/>
      </span>
    </div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'RightsList',
  props: {
    packages: Object,
    isWhite: {
      type: Boolean,
      default: false
    },
    itemWhite: {
      type: Boolean,
      default: false
    },
    showPrev: {
      type: Boolean,
      default: true
    },
    width: {
      type: Number,
      default: 90
    }
  },
  data () {
    return {
      transIndex: 0
    }
  },
  computed: {
    packagesLen () {
      if (this.packages.rights) {
        return this.packages.rights.length
      } else {
        return 0
      }
    }
  },
  destroyed () {
    clearTimeout(this.timer)
  },
  methods: {
    onNext () {
      if (this.transIndex >= this.packagesLen - 5) return
      let index = this.transIndex + 4
      if (index >= this.packagesLen - 1) index = this.packagesLen - 1
      this.transIndex = index
    },
    onPrev () {
      if (this.transIndex === 0) return
      let index = this.transIndex - 4
      if (index <= 0) index = 0
      this.transIndex = index
    }
  }
}
</script>

<style lang="scss" scoped>
.rights-wrap {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    color: #f8de9d;
    img {
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }
    &::before,
    &::after {
      content: "";
      width: 16px;
      height: 1px;
      background: rgba(255, 255, 255, 0.1);
    }
    &::before {
      margin-right: 8px;
    }
    &::after {
      margin-left: 8px;
    }
  }
 .rights-list {
    display: flex;
    align-items: flex-start;
    margin-left: -10px;
    margin-right: -10px;
    transition: transform .4s;
  }
  .rights-box{
    position: relative;
  }
  .rights-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 10px;
    width: 70px;
    box-sizing: content-box;
    color: #DFDFDF;
    .img-wrap {
      width: 50px;
      height: 50px;
      margin-bottom: 2px;
    }
    img {
      width: 100%;
      height: 100%;
    }
    .rights-name {
      word-break: break-all;
      white-space: pre-wrap;
      font-size: 12px;
    }
  }
  .prev-btn,.next-btn{
    display: inline-block;
    width: 16px;
    height: 28px;
    position: absolute;
    top: 21px;
    cursor: pointer;
    .svg-icon{
      margin-top: 4px;
      font-size: 20px;
      color: #c8b08b;
    }
    &:hover{
      background: rgba(255, 255, 255, 0.1);
    }
    &.disabled{
      .svg-icon{
        color: rgba($color: #c8b08b, $alpha: 0.3);
      }
      cursor: not-allowed;
      background: none;
    }
  }
  .prev-btn{
    left: -26px;
  }
  .next-btn{
    right: -28px;
    transform: rotate(180deg);
  }
}
.white-rights-wrap{
  .rights-item {
    width: 70px;
    color: #333;
    .img-wrap {
      padding: 10px;
      font-size: 0;
      background: linear-gradient(180deg, #fff2d2 0%, #f8dd99 100%);
      border-radius: 6px;
      &:hover {
        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
      }
    }
    .rights-name {
      margin-top: 8px;
    }
  }
  .prev-btn,.next-btn{
    .svg-icon{
      color: #9f760f;
    }
    &:hover{
      background: rgba(0, 0, 0, 0.05);
    }
    &.disabled{
      background:none;
      .svg-icon{
        color: rgba($color: #9f760f, $alpha: 0.3);
      }
    }
  }
}
.white-rights-list{
  .rights-item {
    width: 70px;
    .img-wrap {
      padding: 10px;
      font-size: 0;
      background: linear-gradient(180deg, #fff2d2 0%, #f8dd99 100%);
      border-radius: 6px;
      &:hover {
        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
      }
    }
    .rights-name {
      margin-top: 8px;
    }
  }
}
</style>
